<template>
	<view class="action-bottom">
		<button class="item cu-btn" @click="collChange">
			<image v-if="info.isCollect" src="/static/car/coll-a.png" mode=""></image>
			<image v-else src="/static/car/coll.png" mode=""></image>
			<text>{{ info.isCollect ? '已收藏': '收藏' }}</text>
		</button>
		<button class="item cu-btn" open-type="share">
			<image src="/static/car/share.png" mode=""></image>
			<text>分享</text>
		</button>
		<view class="btn">
			<button class="cu-btn" @click="handOrder">预约下单</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineEmits,
		defineProps
	} from 'vue'
	import {
		doAdd,
		doDel
	} from '@/apis/coll.js'
	import {
		useAppsStore
	} from '@/stores/modules/app.js'
	import {
		storeToRefs
	} from 'pinia'

	const props = defineProps({
		info: {
			type: Object,
			default: () => {}
		}
	})
	const emit = defineEmits(['order', 'collChange'])

	const useStore = useAppsStore()
	const {
		getUserInfo: userInfo,
		getCityName: cityName
	} = storeToRefs(useStore)

	const handUser = () => {
		return new Promise((rel, rej) => {
			if (userInfo.value?.id) {
				return rel(true)
			}
			uni.navigateTo({
				url: '/pagesA/login/login'
			})
			rej('请先登录')
		})
	}


	const collChange = async () => {
		await handUser()
		if (props.info.isCollect) {
			await doDel(props.info.id)
		} else {
			await doAdd({
				productId: props.info.id
			})
		}
		emit('collChange')
	}

	const handOrder = async () => {
		await handUser()
		emit('order')
	}
</script>

<style lang="scss" scoped>
	.action-bottom {
		position: fixed;
		z-index: 3;
		bottom: 0;
		width: 750rpx;
		background-color: #fff;
		box-shadow: 0rpx -2rpx 12rpx 2rpx rgba(0, 0, 0, 0.04);
		box-sizing: border-box;
		padding: 22rpx 24rpx;
		padding-bottom: 22rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 22rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 22rpx);
		display: flex;
		align-items: center;

		.item {
			width: 120rpx;
			padding: 0;
			margin: 0;
			height: 110rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: rgba(255, 255, 255, 0);

			image {
				width: 44rpx;
				height: 44rpx;
			}

			text {
				margin-top: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}

		.btn {
			flex: 1;
			margin-left: 20rpx;

			.cu-btn {
				width: 476rpx;
				height: 96rpx;
				background: #FFC434;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
	}
</style>